<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片查看器</title>
</head>

<body style="background: black;">
    <canvas id="canvas" style="display:block;margin:0 auto;border:1px solid #aaa;">您的浏览器尚不支持canvas</canvas>
    <input type="range" id="scale-range" min="0.5" max="3.0" step="0.01" value="1.0" style="display:block;margin:20px auto;width:800px">
    <canvas id="watermark-canvas" style="display:none;margin:0 auto;border:1px solid #aaa;">
        您的浏览器尚不支持canvas
    </canvas>

    <script>
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var slider = document.getElementById('scale-range');

        var watermarkCanvas = document.getElementById("watermark-canvas");
        var watermarkContext = watermarkCanvas.getContext("2d");

        window.onload = function () {
            canvas.width = 1152;
            canvas.height = 768;

            var scale = 1.0;
            var image = new Image();
            image.src = 'src/img-lg.jpg';

            image.onload = function () {
                drawImage(image, scale);
                slider.onmousemove = function () {
                    scale = slider.value;
                    drawImage(image, scale)
                }
            }

            //设置水印canvas
            watermarkCanvas.width = 600;
            watermarkCanvas.height = 100;

            watermarkContext.font = "bold 50px Arial";
            watermarkContext.lineWidth=1;
            watermarkContext.fillStyle='rgba( 255 , 255 , 255 , 0.5 )';
            watermarkContext.textBaseline='middle';
            watermarkContext.fillText('== xiangshuo1992 ==', 20, 50);
        }

        function drawImage(image, scale) {
            var imageWidth = 1152 * scale;
            var imageHeight = 768 * scale;

            x = (canvas.width - imageWidth) / 2;
            y = (canvas.height - imageHeight) / 2;

            context.clearRect(0, 0, canvas.width, canvas.height);
            context.drawImage(image, x, y, imageWidth, imageHeight);

            context.drawImage(watermarkCanvas,canvas.width-watermarkCanvas.width,canvas.height-watermarkCanvas.height);
        }
    </script>
</body>

</html>